<template>
  <div class="idadd">
    <el-dialog
      :title="info ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-form
        :inline="true"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="地址名称" prop="author">
          <el-input
            v-model="PmsBrand.addressName"
            size="small"
            placeholder="地址名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" prop="author">
          <el-input
            v-model="PmsBrand.name"
            size="small"
            placeholder="收货人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号" prop="author">
          <el-input
            v-model="PmsBrand.phone"
            size="small"
            placeholder="收货人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" prop="author">
          <el-input
            v-model="PmsBrand.postCode"
            size="small"
            placeholder="邮政编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="详情地址" prop="author">
          <el-input
            v-model="PmsBrand.detailAddress"
            size="small"
            placeholder="详情地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="author">
          <el-cascader
            size="small"
            :options="options"
            v-model="provinceser"
            @change="handleChange"
            placeholder="请选择省市区"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <!-- 

    


    
   
     
      <div class="cadade">
        地址
        <el-cascader
          size="large"
          :options="options"
          v-model="provinceser"
          @change="handleChange"
          placeholder="请选择省市区"
        ></el-cascader>
      </div> -->
      <span slot="footer" class="footers">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderFor from '@/api/orderFor.js'
import {
  regionData,
  CodeToText,
  selectedOptions,
} from 'element-china-area-data' //引入
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  data() {
    return {
      options: regionData, //选择格式
      provinceser: '',
      provinces: '', ///省市区
      info: '',
      dialogVisible: false,
      value: '',
      value1: '',
      PmsBrand: {
        addressName: '', //地址名称
        city: '', //市
        cityCode: '',
        detailAddress: '', //详细地址
        name: '', //收货人姓名
        phone: '', //收货人手机号
        postCode: '', //邮政编码
        province: '', //省
        receiveStatus: '', //默认发货地址 0||1
        region: '', //区
        sendStatus: '', ///默认收货地址 0||1
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
    submit() {
      this.dialogVisible = false

      if (this.info) {
        orderFor
          .updateApi({
            id: this.info.id,
            addressName: this.PmsBrand.addressName,
            city: this.provinces[1],
            cityCode: this.PmsBrand.cityCode,
            detailAddress: this.PmsBrand.detailAddress,
            name: this.PmsBrand.name,
            phone: this.PmsBrand.phone,
            postCode: this.PmsBrand.postCode,
            province: this.provinces[0],
            receiveStatus: this.PmsBrand.receiveStatus,
            region: this.provinces[3],
            sendStatus: this.PmsBrand.sendStatus,
          })
          .then(res => {
            console.log(res, '编辑')
            this.$parent.addressList()
          })
      } else {
        orderFor
          .saveApi({
            addressName: this.PmsBrand.addressName,
            city: this.provinces[1],
            cityCode: this.PmsBrand.cityCode,
            detailAddress: this.PmsBrand.detailAddress,
            name: this.PmsBrand.name,
            phone: this.PmsBrand.phone,
            postCode: this.PmsBrand.postCode,
            province: this.provinces[0],
            receiveStatus: this.PmsBrand.receiveStatus,
            region: this.provinces[3],
            sendStatus: this.PmsBrand.sendStatus,
          })
          .then(res => {
            console.log(res, 'res')
            this.$parent.addressList()
          })
      }
    },
    //子组件的打开方法
    open(data) {
      this.dialogVisible = true
      if (data) {
        console.log(data, 'data')
        this.PmsBrand = data
        this.info = data
        console.log(this.info, 'this.info')
      } else {
        this.info = ''
      }
    },
    handleAvatarSuccess(res) {
      console.log(res, 'resss')
      if (res.success) {
        this.PmsBrand.bigPic = res.data.fileUrl
        // this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
    handleAvatarSuccesser(res) {
      console.log(res, 'resss')
      if (res.success) {
        this.PmsBrand.logo = res.data.fileUrl

        // this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
    handleChange(e) {
      this.selectedOptions = e
      var name = ''
      const arr = this.selectedOptions.map(
        item => (name += CodeToText[item] + '')
      )
      console.log(arr, 'arr')
      this.provinces = arr
      console.log(this.provinces, ' this.provinces')
    },
  },
}
</script>

<style scoped lang="scss">
.idadd ::v-deep .el-dialog {
  height: 500px !important;
}
.cadade {
  float: left;
  margin-left: 100px;
  margin-right: 200px;
  margin-bottom: 50px;
}
.el-input {
  width: 300px;
}
.el-cascader {
  width: 300px;
}
.footers {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px;
}
.switchsed {
  position: absolute;
  top: 250px;
  left: 120px;
}
.switchses {
  position: absolute;
  top: 250px;
  left: 620px;
}
</style>